<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <title>商城首页</title>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
    <meta name="description" content="Write an awesome description for your new site here. You can edit this line in _config.yml. It will appear in your document head meta (for Google search results) and in your feed.xml site description.
">
    <link rel="stylesheet" href="../../../static/wxui/lib/weui.min.css" th:href="@{/wxui/lib/weui.min.css}">
    <link rel="stylesheet" href="../../../static/wxui/css/jquery-weui.css" th:href="@{/wxui/css/jquery-weui.css}">
    <link rel="stylesheet" href="../../../static/wxui/css/style.css" th:href="@{/wxui/css/style.css}">
    <link rel="stylesheet" href="../../../static/wxui/css/hpshop.css" th:href="@{/wxui/css/hpshop.css}">

</head>
<body ontouchstart>
<!--顶部搜索-->
<header class='weui-header'>
    <div class="weui-search-bar" id="searchBar">
        <form class="weui-search-bar__form" th:action="@{/goods/front/goProList}">
            <div class="weui-search-bar__box">
                <i class="weui-icon-search"></i>
                <input type="search" class="weui-search-bar__input" name="name" id="searchInput" placeholder="搜索您想要的商品" required>
                <a href="javascript:" class="weui-icon-clear" id="searchClear"></a>
            </div>
            <label class="weui-search-bar__label" id="searchText"
                   style="transform-origin: 0px 0px 0px; opacity: 1; transform: scale(1, 1);">
                <i class="weui-icon-search"></i>
                <span>搜索您想要的商品</span>
            </label>
        </form>
        <a href="javascript:" class="weui-search-bar__cancel-btn" id="searchCancel">取消</a>
    </div>
</header>
<!--主体-->
<div class='weui-content'>
    <!--顶部轮播-->
    <div class="swiper-container swiper-banner">
        <div class="swiper-wrapper" id="carouselimg">
        </div>
        <div class="swiper-pagination"></div>
    </div>
    <!--图标分类-->
    <div class="weui-flex wy-iconlist-box">
        <div class="weui-flex__item"><a href="/goods/front/goProList?orderBy=es_goods.saleNum" class="wy-links-iconlist">
            <div class="img"><img src="../../../static/wxui/images/menu/1.png" th:src="@{/wxui/images/menu/1.png}"></div>
            <p>销量卖出</p></a></div>
        <div class="weui-flex__item"><a href="/goods/front/goProList?orderBy=es_goods.collectionNum" class="wy-links-iconlist">
            <div class="img"><img src="../../../static/wxui/images/menu/2.png" th:src="@{/wxui/images/menu/2.png}"></div>
            <p>人气收藏</p></a></div>
        <div class="weui-flex__item"><a href="all_orders.html" class="wy-links-iconlist">
            <div class="img"><img src="../../../static/wxui/images/menu/5.png" th:src="@{/wxui/images/menu/3.png}"></div>
            <p>限时秒杀</p></a></div>
        <div class="weui-flex__item"><a href="/orderInfo/frontStage/lookOrders?state=" class="wy-links-iconlist">
            <div class="img"><img src="../../../static/wxui/images/menu/4.png" th:src="@{/wxui/images/menu/4.png}"></div>
            <p>订单管理</p></a></div>
    </div>
    <!--新闻切换-->
    <div class="wy-ind-news">
        <i class="news-icon-laba"></i>
        <div class="swiper-container swiper-news">
            <div class="swiper-wrapper" id="newsList">
            </div>
            <div class="swiper-pagination"></div>
        </div>
        <a href="news_list.html" class="newsmore"><i class="news-icon-more"></i></a>
    </div>
    <!--销量卖出-->
    <div class="wy-Module">
        <div class="wy-Module-tit"><span>销量卖出</span></div>
        <div class="wy-Module-con">
            <div class="swiper-container swiper-xlmc" style="padding-top:34px;">
                <div class="swiper-wrapper" id="saleList">
                </div>
                <div class="swiper-pagination jingxuan-pagination"></div>
            </div>
        </div>
    </div>

    <!--人气收藏-->
    <div class="wy-Module">
        <div class="wy-Module-tit"><span>人气收藏</span></div>
        <div class="wy-Module-con">
            <div class="swiper-container swiper-rqsc" style="padding-top:34px;">
                <div class="swiper-wrapper" id="collList">
                </div>
                <div class="swiper-pagination jingxuan-pagination"></div>
            </div>
        </div>
    </div>

    <!--为你推荐-->
    <div class="wy-Module">
        <div class="wy-Module-tit-line"><span>为你推荐</span></div>
        <div class="wy-Module-con">
            <ul class="wy-pro-list clear" id="recommendList">
            </ul>
            <div class="morelinks"><a th:href="@{/goods/front/goProList}">查看更多 >></a></div>
        </div>
    </div>
</div>

<!--底部导航-->
<div class="foot-black"></div>
<div class="weui-tabbar wy-foot-menu">
    <a th:href="@{/index}" class="weui-tabbar__item weui-bar__item--on">
        <div class="weui-tabbar__icon foot-menu-home"></div>
        <p class="weui-tabbar__label">首页</p>
    </a>
    <a th:href="@{/type/front/types}" class="weui-tabbar__item">
        <div class="weui-tabbar__icon foot-menu-list"></div>
        <p class="weui-tabbar__label">分类</p>
    </a>
    <a th:href="@{/shopcar/front/myCar}" class="weui-tabbar__item">
       <!-- <span class="weui-badge" style="position: absolute;top: -.4em;right: 1em;"></span> -->
        <div class="weui-tabbar__icon foot-menu-cart"></div>
        <p class="weui-tabbar__label">购物车</p>
    </a>
    <a href="/user/frontstage/goUserCenterPage" class="weui-tabbar__item" id="my">
        <div class="weui-tabbar__icon foot-menu-member"></div>
        <p class="weui-tabbar__label">我的</p>
    </a>
</div>

<script src="../../../static/wxui/lib/jquery-2.1.4.js" th:src="@{/wxui/lib/jquery-2.1.4.js}"></script>
<script src="../../../static/wxui/lib/fastclick.js" th:src="@{/wxui/lib/fastclick.js}"></script>
<script>
    $(function () {
        getNews();
        getSales();
        getColl();
        getRecommend();
        listCarousel();
        // goMy();
        FastClick.attach(document.body);
    });
</script>
<script src="../../../static/wxui/js/jquery-weui.js" th:src="@{/wxui/js/jquery-weui.js}"></script>
<script src="../../../static/wxui/js/swiper.js" th:src="@{/wxui/js/swiper.js}"></script>

<script th:inline="javascript" type="text/javascript">

    /*****************************
     * @Description: 加载轮播图
     * @Param:
     * @return:
     * @Author: 刘涛
     * @Date: 2018/3/19
     *******************************/
    function listCarousel() {
        $.ajax({
            type: "post",
            url: "carousel/frontstage/listCarousel",
            dataType: 'json',
            success: function (data) {
                var content = "";
                $.each(data.data, function (i, list) {
                    content += '<div class="swiper-slide">';
                    content +='<a href="/goods/front/detail/'+list.goodId+'">';
                    content +='<img class="carousel-img" src="'+list.img+'"/>';
                    content +='</a></div>'
                });
                $("#carouselimg").append(content);
                $(".swiper-banner").swiper({
                    loop: true,
                    autoplay: 3000
                });
            }
        });
    }

    /**
     * 加载新闻
     */
    function getNews() {
        $.ajax({
            type: "post",
            url: "news/front/newsList",
            dataType: 'json',
            success: function (data) {
                var content = "";
                $.each(data.data, function (i, list) {
                    content += '<div class="swiper-slide">';
                    content +='<a href="/news/front/detail?id='+list.id+'">';
                    content += list.title;
                    content +='</a></div>'
                });
                $("#newsList").append(content);
                $(".swiper-news").swiper({
                    loop: true,
                    direction: 'vertical',
                    paginationHide :true,
                    autoplay: 3000
                });
            }
        });
    }

    /**
     * 加载销量卖出
     */
    function getSales() {
        $.ajax({
            type: "post",
            url: "goods/front/saleList",
            dataType: 'json',
            success: function (data) {
                var content = "";
                $.each(data.data, function (i, list) {
                    content += '<div class="swiper-slide">';
                    content +='<a href="/goods/front/detail/'+list.id+'">';
                    content +='<img class="xlmc-img" src="'+list.coverimg+'"/>';
                    content +='</a></div>'
                });
                $("#saleList").append(content);
                $(".swiper-xlmc").swiper({
                    pagination: '.swiper-pagination',
                    paginationType:'fraction',
                    loop: true,
                    slidesPerView:3,
                    slidesPerColumn: 2,
                    paginationClickable: true,
                    spaceBetween:2
                });
            }
        });
    }

    /**
     * 人气收藏
     */
    function getColl(){
        $.ajax({
            type: "post",
            url: "goods/front/collList",
            dataType: 'json',
            success: function (data) {
                var content = "";
                $.each(data.data, function (i, list) {
                    content += '<div class="swiper-slide">';
                    content +='<a href="/goods/front/detail/'+list.id+'">';
                    content +='<img class="rqsc-img" src="'+list.coverimg+'"/>';
                    content +='</a></div>'
                });
                $("#collList").append(content);
                $(".swiper-rqsc").swiper({
                    pagination: '.swiper-pagination',
                    loop: true,
                    paginationType:'fraction',
                    slidesPerView:2,
                    paginationClickable: true,
                    spaceBetween: 5
                });
            }
        });
    }

    /**
     *加载为你推荐
     */
    function getRecommend(){
        $.ajax({
            type: "post",
            url: "goods/front/recommendList",
            dataType: 'json',
            success: function (data) {
                var content = "";
                $.each(data.data, function (i, list) {
                    content += '<li class="pb-item">';
                    content +='<a href="/goods/front/detail/'+list.id+'">';
                    content += '<div class="swiper-slide">';
                    content +='<div class="proimg"><img src="'+list.coverimg+'" style="width: 175px "/></div>';
                    content +='<div class="protxt">';
                    content +='<div class="name">'+list.title+'</div>';
                    content +='<div class="wy-pro-pri">￥<span>'+list.price+'</span></div>';
                    content +='</div>';
                    content +='</a></li>';
                });
                $("#recommendList").append(content);
            }
        });
    }
</script>
</body>
</html>
